<template>
	<view class="">
		<view class="logoImg-upload">
			<view class="logoImg-img" @click="selectImg">
				<image v-if="temUrl && temUrl !== 'undefined' " :src="temUrl || '/static/logoImg.png'" mode="aspectFill"
					class="w-150 h-150 br50">
				</image>
				<image v-else src="/static/logoImg.png" mode="aspectFill" class="w-150 h-150 br50"></image>
				<image src="/static/ranking-icon1.png" class="ranking-icon"></image>
			</view>
			<view>点击更头像</view>
		</view>
		<view class="personal-item">
			<text class="form-label">昵称</text>
			<input class="personal-input flex1" placeholder="请输入昵称" placeholder-style="color: #BFBFBF;"
				v-model="shopInfo.name" />
		</view>
		
		<view class="footer-box">
			<u-button type="primary" @click="updatePersonal">保存</u-button>
		</view>

		<u-action-sheet :list="sex" v-model="sexModal" border-radius="16" safe-area-inset-bottom @click="handleClick">
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		shopBrief,
		shopEditShop
	} from '@/api/shop/index.js'
	import {requestUrl} from '@/common/js/config.js'
	export default {
		data() {
			return {
				sexModal: false,
				shopInfo: {},
				index: '',
				sex: [{
					text: '男',
					color: '#333333',
					fontSize: 30
				}, {
					text: '女',
					color: '#333333',
					fontSize: 30
				}],
				temUrl: ""
			}
		},
		onLoad() {
			// if (!uni.getStorageSync('userId')) {
			// 	uni.navigateTo({
			// 		url: '/pages/login/login'
			// 	});
			// 	return
			// }
			
			this.shopInfo = uni.getStorageSync('shopInfo')
			console.log('这是店铺信息',this.shopInfo);
			this.temUrl = this.shopInfo.logoImg
			
			console.log('水水水水',this.temUrl);
			
			this.setImshopInfo()
			// this.getShopInfo()
		},
		
		methods: {
			// 取店铺信息
			getShopInfo() {
				shopBrief()
					.then((res) => {
						console.log('这是店铺信息',res.data);
						if (res.code == 0 && res.data) {
							this.shopInfo = res.data
							
							this.temUrl = this.shopInfo.logoImg
						}
					})
			},
			handleClick(index) {
				this.shopInfo.gender = index
			},

			// 点击保存
			updatePersonal() {
				// 上传头像
				let that = this
				uni.uploadFile({
					url: requestUrl + '/api/common/upload',
					filePath: that.temUrl,
					name: 'file',
					success: (response) => {
						const data = JSON.parse(response.data)
						that.shopInfo.logoImg = data.url

						shopEditShop({
								logoImg: that.shopInfo.logoImg,
								name: that.shopInfo.name
							})
							.then((res) => {
								if (res.code == 0) {
									that.setImshopInfo()
									uni.showToast({
										title: '保存成功',
										icon: 'none',
										duration: 2000
									});
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										});
									}, 2000)
								}
							})
					}
				});
			},
			
			// 设置环信用户属性
			setImshopInfo(){
				let option = {
				  nickname: this.shopInfo.name,
				  avatarurl: this.shopInfo.logoImg,
				  mail: "",
				  phone: this.shopInfo.telephone,
				  gender: "",
				  birth: "",
				  sign: "a sign",
				  ext: JSON.stringify({
				    nationality: "China",
				    merit: "Hello, world！",
				  }),
				};
				uni.WebIM.conn.updateUserInfo(option).then((res) => {
				  console.log('环信用户属性设置成功',res);
				});
			},
			
			selectImg() {
				const that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));

						that.temUrl = res.tempFilePaths[0]
						// uni.uploadFile({
						// 	url: API_PATH2 + '/api/common/upload',
						// 	filePath: res.tempFilePaths[0],
						// 	name: 'file',
						// 	header: {
						// 		'token': `${uni.getStorageSync('token') || ''}`
						// 	},
						// 	formData: {
						// 		'type': '0'
						// 	},
						// 	success: (response) => {
						// 		const data = JSON.parse(response.data)
						// 		console.log('response', data)
						// 		that.shopInfo.logoImg = data.url
						// 	}
						// });
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		min-height: 100%;
		background: #f5f5f5;
		position: relative;
		box-sizing: border-box;
	}
	
	.personal-item {
		height: 100upx;
		line-height: 100upx;
		background-color: #ffffff;
		border-bottom: 1px solid #F2F2F2;
		display: flex;
		justify-content: space-between;
		padding: 0upx 30upx;
		align-items: center;
	}

	.user-name {
		font-size: 30upx;
		color: #666666;
	}

	.logoImg-upload {
		background-color: #ffffff;
		border-bottom: 1px solid #F2F2F2;
		padding: 0upx 30upx;
		padding-top: 100upx;
		font-size: 26upx;
		color: #999999;
		text-align: center;
		padding-bottom: 60upx;
	}

	.logoImg-img {
		margin: 0upx auto;
		width: 180upx;
		height: 180upx;
		margin-bottom: 10upx;
		position: relative;
	}

	.logoImg-img image {
		width: 100%;
		height: 100%;
		border-radius: 100%;
	}

	.ranking-icon {
		width: 110upx !important;
		height: 20px !important;
		position: absolute;
		left: 50%;
		bottom: -10upx;
		transform: translateX(-50%);
	}

	.personal-input {
		height: 100%;
		font-size: 30upx;
		text-align: right;
	}

	.form-label {
		height: 100%;
		display: inline-block;
		color: #999999;
	}

	.arrow-icon {
		width: 16upx;
		margin-left: 10upx;
	}

	.common-btn {
		width: 600upx;
		margin: 100upx auto;
		text-align: center;
	}

	.form-item-text {
		flex: 1;
		text-align: right;
	}
</style>